<template>
	<sc-dialog v-model="visible" show-fullscreen destroy-on-close :title="titleMap[mode]" width="600px" @close="close">
		<el-form ref="formRef" label-width="100px" :model="formData" :rules="rules">
			<el-form-item label="产品" prop="productId">
				<MaterialTableSelect
					v-model="selectedMaterial"
					:disabled="mode === 'edit'"
					placeholder="输选择产品"
					@change="change" />
			</el-form-item>
			<el-form-item label="标记" prop="tagName" width="140">
				<el-input v-model="formData.tagName" disabled />
			</el-form-item>
			<el-form-item label="标记名称" prop="tagDisplayName" width="120">
				<el-input v-model="formData.tagDisplayName" disabled />
			</el-form-item>
			<el-form-item label="步序" prop="step" width="170">
				<el-input-number v-model="formData.step" :disabled="mode === 'edit'" :min="0" :max="stepMax" />
			</el-form-item>
			<el-form-item label="下限值" prop="stdLower" width="170">
				<el-input-number v-model="formData.stdLower" :precision="2" :min="0" :max="9999" />
			</el-form-item>
			<el-form-item label="上限值" prop="stdHigher" width="170">
				<el-input-number v-model="formData.stdHigher" :precision="2" :min="0" :max="9999" />
			</el-form-item>
			<el-form-item label="是否禁用" prop="isDisabled" width="100">
				<el-switch v-model="formData.isDisabled" />
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
import MaterialTableSelect from "../../../components/MaterialTableSelect";

export default {
    emits: ['complete'],
    components: {
        MaterialTableSelect,
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: "新增",
                edit: "编辑",
            },
            isSaveing: false,
            visible: false,
            selectedMaterial: {},
            stepMax: 0,
            formData: {
                id: 0,
                processId: null,
                procCode: '',
                productId: null,
                productCode: '',
                tagName: '',
                tagDisplayName: '',
                step: 0,
                stdHigher: 0,
                stdLower: 0,
                isDisabled: false,
            },
            rules: {
                processId: [{ required: true, message: "请选择工序", trigger: "blur" }],
                productId: [{ required: true, message: "请选择产品", trigger: "blur" }],
                tagName: [{ required: true, message: "请输入标记", trigger: "blur" }],
                tagDisplayName: [{ required: true, message: "请输入标记名称", trigger: "blur" }],
            },
        };
    },
    methods: {
        change(item) {
            this.formData.productId = item.id;
            this.formData.productCode = item.itemCode;
        },
        async open(item) {
            if (!item.id) {
                this.mode = "add";

                this.formData.processId = item.processId;
                this.formData.procCode = item.procCode;
                this.formData.tagName = item.tagName;
                this.formData.tagDisplayName = item.tagDisplayName;
                this.stepMax = item.stepMax;
            } else {
                this.mode = "edit";

                const resp = await this.$API.procprocessparams.model.get(item.id);
                this.formData = resp.data;

                this.selectedMaterial = { id: this.formData.productId, itemName: this.formData.productCode };
            }

            this.visible = true;
        },
        save() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    let resp = null;
                    if (this.formData.id === 0) {
                        resp = await this.$API.procprocessparams.add.post(this.formData);
                    } else {
                        resp = await this.$API.procprocessparams.update.put(this.formData);
                    }
                    this.isSaveing = false;
                    if (resp.code == 200) {
                        this.$emit("complete");
                        this.visible = false;
                        this.$message.success("保存成功");
                    } else {
                        this.$alert(resp.message, "提示", { type: "error" });
                    }
                }
            });
        },
        close() {
            this.selectedMaterial = {};
            this.formData = {
                id: 0,
                processId: null,
                procCode: '',
                productId: null,
                productCode: '',
                tagName: '',
                tagDisplayName: '',
                step: 0,
                stdHigher: 0,
                stdLower: 0,
                isDisabled: false,
            };
            this.$refs.formRef.resetFields();
            this.visible = false;
        },
    },
};
</script>
